<!-- 案件详情沟通表单 -->
<template>
	<div class="form-title">
		<span>沟通记录</span>
	</div>
	<a-form ref="formRef" name="advanced_search" :model="formData" :rules="formRules" class="ant-advanced-search-form">
		<a-form-item label="沟通对象:" name="callRecipient">
			<a-select v-model:value="formData.callRecipient" placeholder="请选择沟通对象" :options="callRecipientOptions" />
		</a-form-item>
		<a-form-item label="沟通方式:" name="workType">
			<a-select v-model:value="formData.workType" placeholder="请选择沟通方式" :options="talkTypeOptions" />
		</a-form-item>
		<a-form-item label="沟通状态:" name="workResult" v-if="formData.workType !== '3'">
			<a-select
				v-model:value="formData.workResult"
				:options="talkResultOptions"
				class="xn-wd"
				placeholder="请选择职位分类"
			/>
		</a-form-item>
		<a-form-item label="结果代码" name="resultCode" v-if="formData.workType !== '3'">
			<a-select v-model:value="formData.resultCode" placeholder="请选择结果代码" :options="reminderOptions" />
		</a-form-item>
		<!-- <a-form-item label="是否承诺还款:" name="isPromiseRepayment" v-if="formData.workType !== '3'">
			<a-select
				v-model:value="formData.isPromiseRepayment"
				placeholder="请选择是否承诺还款"
				:options="yesOrNoOptions"
				@click="
					() => {
						formData.promiseRepaymentAmount = '0.00'
					}
				"
			/>
		</a-form-item> -->
		<!-- <a-form-item label="预约还款金额:" name="promiseRepaymentAmount" v-if="formData.isPromiseRepayment === '1'">
			<a-input v-model:value="formData.promiseRepaymentAmount" placeholder="请输入" allow-clear />
		</a-form-item>
		<a-form-item label="预约还款日期:" name="promiseRepaymentDay" v-if="formData.isPromiseRepayment === '1'">
			<a-date-picker v-model:value="formData.promiseRepaymentDay" value-format="YYYY-MM-DD" />
		</a-form-item> -->
		<a-form-item label="预约还款金额:" name="promiseRepaymentAmount" v-if="formData.resultCode === 'A01'">
			<a-input v-model:value="formData.promiseRepaymentAmount" type="number" min="0" placeholder="请输入" allow-clear />
		</a-form-item>
		<a-form-item label="预约还款日期:" name="promiseRepaymentDay" v-if="formData.resultCode === 'A01'">
			<a-date-picker v-model:value="formData.promiseRepaymentDay" value-format="YYYY-MM-DD" style="width: 100%" />
		</a-form-item>
		<a-form-item label="沟通内容:" name="remark">
			<a-textarea
				v-model:value="formData.remark"
				placeholder="请输入沟通内容"
				:auto-size="{ minRows: 2, maxRows: 5 }"
			/>
		</a-form-item>
		<a-form-item>
			<a-button class="xn-mr8" type="primary" @click="onSubmit" :loading="buttonLoading">保存</a-button>
			<a-button @click="onClose">重置</a-button>
		</a-form-item>
	</a-form>
</template>

<script setup name="loan">
	import tool from '@/utils/tool'
	import { required } from '@/utils/formRules'
	import workApi from '@/api/tjzy/work/workApi'
	import { onBeforeRouteUpdate, onBeforeRouteLeave, useRoute } from 'vue-router'
	import { useWorkRecordStore } from '@/store/case/workRecord.js'
	import { onMounted } from 'vue'
	//=======================================DATA==========================================================
	const workRecordStore = useWorkRecordStore()
	const route = useRoute()
	const props = defineProps({
		caseId: String,
		projectCode: String,
		debtorCardId: String,
		rowData: Object,
		caseInfo: Object
	})
	const emit = defineEmits({ successful: null })
	const formRef = ref()
	const formData = ref({
		caseId: props.caseId,
		projectCode: props.projectCode,
		debtorCardId: props.debtorCardId,
		callRecipient: '本人',
		workType: undefined,
		workResult: undefined,
		// isPromiseRepayment: '0',
		promiseRepaymentDay: undefined,
		isAlreadySaved: undefined,
		promiseRepaymentAmount: undefined,
		remark: undefined,
		resultCode: undefined,
		liaisonName: props.caseInfo.debtorName,
		liaisonPhone: props.caseInfo.debtorCasePhone
	})
	//初始的form数据、store储存的form数据用于对比最新form是否需要储存
	let initFormData, lastFormData
	lastFormData = initFormData = {
		caseId: props.caseId,
		projectCode: props.projectCode,
		debtorCardId: props.debtorCardId,
		callRecipient: '本人',
		workType: undefined,
		workResult: undefined,
		// isPromiseRepayment: '0',
		promiseRepaymentDay: undefined,
		isAlreadySaved: undefined,
		promiseRepaymentAmount: undefined,
		remark: undefined,
		resultCode: undefined,
		liaisonName: props.caseInfo.debtorName,
		liaisonPhone: props.caseInfo.debtorCasePhone
	}
	const callRecipientOptions = tool.dictList('CallRecipient')
	const talkTypeOptions = tool.dictList('TalkType')
	const talkResultOptions = tool.dictList('TalkResult')
	const yesOrNoOptions = tool.dictList('YesOrNo')
	const reminderOptions = tool.dictList('Reminder')
	const buttonLoading = ref(false)

	const formRules = {
		callRecipient: [required('请选择沟通对象')],
		workType: [required('请选择沟通方式')],
		workResult: [required('请选择沟通状态')],
		// isPromiseRepayment: [required('请选择是否承诺还款')],
		concatPhone: [required('请输入联系人电话')],
		resultCode: [required('请选择结果代码')],
		promiseRepaymentAmount: [
			{
				required: true,
				message: '请输入预约还款金额',
				trigger: ['change', 'blur'],
				validator: (rule, value, callback) => {
					// if (formData.value.isPromiseRepayment === '1' && formData.value.promiseRepaymentAmount === '') {
					// 	callback(new Error('请输入预约还款金额'))
					// } else {
					// 	callback()
					// }
					if (formData.value.resultCode === 'A01' && !Number(value)) {
						callback(new Error('请输入预约还款金额'))
					} else {
						callback()
					}
				}
			}
		],
		promiseRepaymentDay: [
			{
				required: true,
				message: '请选择预约还款日期',
				trigger: 'change',
				validator: (rule, value, callback) => {
					// if (formData.value.isPromiseRepayment === '1' && formData.value.promiseRepaymentDay === undefined) {
					// 	callback(new Error('请选择预约还款日期'))
					// } else {
					// 	callback()
					// }
					if (formData.value.resultCode === 'A01' && !formData.value.promiseRepaymentDay) {
						callback(new Error('请选择预约还款日期'))
					} else {
						callback()
					}
				}
			}
		],
		remark: [required('请输入沟通内容')]
	}
	//=======================================LIFE HOOKS==========================================================
	onMounted(() => {
		// 获取作业记录
		// console.log('获取作业', workRecordStore.getRecord(props.caseId))
		if (workRecordStore.getRecord(props.caseId)) {
			formData.value = workRecordStore.getRecord(props.caseId)
			lastFormData = JSON.parse(JSON.stringify(workRecordStore.getRecord(props.caseId)))
		}
	})

	//=======================================METHODS==========================================================
	//操作沟通form储存
	const handleFormStore = (from) => {
		//关闭标签删除form缓存
		if (workRecordStore.isClose) {
			workRecordStore.delRecord(from.query.caseId)
			workRecordStore.setIsclosed(false)
			// console.log('删除作业记录', workRecordStore.records)
			return
		}
		//判断form是否为初始form或者上次储存在store的form值,如果是则不重复储存
		if (
			JSON.stringify(formData.value) !== JSON.stringify(initFormData) &&
			JSON.stringify(formData.value) !== JSON.stringify(lastFormData)
		) {
			workRecordStore.setRecord(formData.value)
			// console.log('储存作业记录', workRecordStore.records)
		}
	}
	//=======================================REQUEST==========================================================

	const onSubmit = () => {

		formRef.value
			.validate()
			.then(() => {
				buttonLoading.value = true
				if (formData.value.id) {
					formData.value.isAlreadySaved = 1
					workApi.editWork(formData.value).then(() => {
						onClose()
						emit('successful')
					})
				} else {
					workApi.addWork(formData.value).then(() => {
						onClose()
						emit('successful')
					})
				}
			})
			.finally(() => {
				buttonLoading.value = false
			})
	}
	const onClose = () => {
		formRef.value.resetFields()
	}
	//=======================================OTHERS==========================================================
	watch(
		() => props.rowData,
		(newValue) => {
			formData.value = newValue
			formData.value.caseId = props.caseId
		}
	)
	//储存作业记录
	onBeforeRouteUpdate((to, from, next) => {
		if (from.name === 'caseDetail') {
			handleFormStore(from)
		}
		next()
	})
	onBeforeRouteLeave((to, from, next) => {
		handleFormStore(from)
		next()
	})
</script>
